/*
 * @Title: 演艺-立即预定
 * @Created by: ycq 
 */
<template>
	<view :class="toPay||showXc||showNk?'orderbody':''">
		<view v-if="showMask" class="mask" @click="closeMask"></view>
		<IndexHead :config='pageConfig'></IndexHead>
		<view  class="order-body">
			<view class="order-head">
				<text class="order-hotel-name">{{hotel}}</text>
				<view class="food-info">
					<view style="width: 100%;height: auto;display: table;">
					<image class="food-img" src="/static/myPic/binguan.png" mode=""></image>
					<view class="order-right">
						<view class="item-title"  >
							<text class="title-text">[沈阳]椅子乐团2019“城市潜水”...</text>
						</view>
						<text class="tip">2019.11.12周五19:00</text>
						<view class="must-read" @click="openNk()">
							
							<text class="read" >购买须知</text>
							<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
							<uni-icon type="arrowright"  size="20" color="rgba(110,164,255,1.00)" style='margin-top: 20upx;'></uni-icon>
							<!-- #endif -->
							<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
							<uni-icon type="arrowright"  size="20" color="rgba(110,164,255,1.00)"></uni-icon>
							<!-- #endif -->
							
						</view>
					</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<view class="order-item">
					<text class="order-label">￥659.00票档 x2张</text>	
					<image src="/static/shop/jia.png" mode=""></image>
					<text class="order-num">{{num}}</text>
					<image v-if="false" src="/static/shop/cjian.png" mode=""></image>
					<image src="/static/shop/jian.png" mode=""></image>
				</view>
				<view class="order-item">
					<text class="order-label">实名信息</text>
					<text class="order-text">需填写</text>
					<text class="man-num">1位</text>
				</view>
				<view class="order-item" style="display: flex;flex-direction: row;">
					<view class="people" v-for="(item,index) in peopleData" :key='index'>
						{{item.name}}
					</view>
					<view class="people-xz">
						新增
					</view>
				</view>
				<view class="order-item" :style="{height:peopleData.length*220+(num-peopleData.length)*100+'upx' }">
					<text class="order-label" :style="{height:peopleData.length*220+(num-peopleData.length)*100+'upx','line-height':peopleData.length*220+(num-peopleData.length)*100+'upx' }">出行人</text>
					<view class="renyuan-list" :style="{height:peopleData.length*220+(num-peopleData.length)*100+'upx' }">
						<view class="renyuan-item" style="color:rgba(51,51,51,1.00)" v-if="peopleData[index]!=null" v-for="(item,index) in num" :key='index'>
							<text class="renyuan-name">{{peopleData[index].name}}</text>
							<text class="renyuan-info" v-if="peopleData[index].phone!=''||peopleData[index].cardId!=''">{{peopleData[index].phone}}</text>
							<text class="renyuan-info" v-if="peopleData[index].phone!=''||peopleData[index].cardId!=''">{{peopleData[index].cardId}}</text>
							<text class="renyuan-tip" v-if="peopleData[index].phone==''||peopleData[index].cardId==''">信息不全，请补全信息</text>
							<image src="/static/edit.png" mode=""></image>
						</view>
						<view class="renyuan-item" style="height: 100upx;" v-if="peopleData[index]==null" v-for="(item,index) in num" :key='index'>出行人{{index+1}}，每件需填1个出行人</view>
					</view>
				</view>
				
				
			</view>
			<view class="order-info" style="margin-top: 28upx;margin-bottom: 130upx;">
				<view class="order-item">
					<text class="order-label">联系信息</text>	
					<text class="order-price"></text>
				</view>
				
				<view class="order-item">
					<text class="order-label">联系方式</text>	
					<text class="phone">接收确认信息</text>
					<image class="txl" src="/static/txl.png" mode=""></image>
				</view>
				
			</view>
			
			<view class="order-bottom">
				<view class="btn" @click="pay">立即支付</view>
				<view class="btn2" v-if="!addedXc" @click="payXc">加入行程<br>暂不支付</view>
				<view class="btn2" style="line-height: 98upx;padding: 0;height: 98upx;" v-if="addedXc" >已加入行程</view>
				<view style="float: right;">
					<text class="price">￥698</text>
					<text class="sum">共计：</text>
					<view class="yh"><text>已优惠￥20</text></view>
				</view>
			</view>
			<view v-if="ifAdd" class="if-add-xc">
				<text>是否添加到“我的行程”中</text>
				<view class="add-xc-bottom">
					<view class="add-quxiao" @click="quxiaoXc">取消</view>
					<view class="add-add" @click="payXc">添加</view>
				</view>
			</view>	
		</view>
		<pay-view v-if='toPay'></pay-view>
		<!-- <PaySuccess v-if='paySucc' :payData='payData'></PaySuccess> -->
		<xing-cheng v-if='showXc'/>
		
		<yanyiPop v-if='showNk'></yanyiPop>
	</view>
</template>

<script>
	import PaySuccess from '@/components/PaySuccess.vue'
	import TimePicker from '@/components/TimePicker.vue'
	import uniIcon from '@/components/uni-icon/uni-icon'
	import yanyiPop from '@/pages/huodong/yanyiPop'
	export default{
		data(){
			return{
				showXc:false,
				ifAdd:false,
				toPay:false,
				showNk:false,
				showPicker:false,
				num:3,
				addedXc:false,
				paySucc:false,
				showMask:false,
				peopleData:[
					{
						name:'任雪',
						cardId:'213***********213',
						phone:'156****2134'
					},
					{
						name:'张蕾',
						cardId:'',
						phone:''
					}
				],
				xcId:null,
				hotel:'海盗窝广场综艺秀',
				time: '12:01',
				startTime:'8月1日',
				payData:[],
				endeTime:'8月4日',
				day:3,
				pageConfig:{
					common:{
						hasSearch:false, //显示整版搜索框
						hasTitle:false, //显示页面title
						hasMenu:false,
						maxHead:true,
						pageId:'',
					},
					left:{
						showBack:true,
						img:'' , //左侧图标
						text:'', //左侧文字
					},
					mid:{
						title:'' ,//页面title
						hasSearchMid:false //显示中间搜索框
					},
				},
			}
		},methods:{
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			pay(){
				this.toPay = true
				this.showMask = true
				document.body.style.overflow = 'hidden'
			},
			exitPay(){
				this.toPay = false
				this.showMask= false
				document.body.style.overflow = 'scroll'
			},
			paySuccess(data){
				data.hotel = this.hotel
				this.payData = data
				this.toPay = false;
				this.paySucc = true;
			},
			closeMask(){
				this.exitPay()
			},
			closeBox(){
				this.paySucc = false;
				
				if(this.xcId!=null){
					this.$store.state.tabInd = 3
					uni.navigateTo({
						url:'../../gonglue/glTabbar'
					})
				}else{
					this.ifAdd = true
					// this.showMask= false
				}
			},
			openNk(){
				this.showNk = true
				document.body.style.overflow = 'hidden'
			},
			closeNk(){
				this.showNk = false
				document.body.style.overflow = 'scroll'
			},
			payXc(){
				if(this.xcId!=null){
					this.$store.state.tabInd = 3
					uni.navigateTo({
						url:'../../gonglue/glTabbar'
					})
				}else{
					this.showXc = true
				}
			},
			toOrderByXc(){
				this.xcId =1
				this.showXc = false
			},
			closeXc(){
				this.showXc=false
			},
			addXc(){
				// this.$store.state.tabInd = 3
				// uni.navigateTo({
				// 	url:'../../gonglue/glTabbar'
				// })
				this.showXc=false
				this.addedXc = true
				this.ifAdd =false
				this.showMask = false
			},
			quxiaoXc(){
				uni.navigateBack({
					delta:1
				})
			},
			openPicker(){
				this.showPicker = true
				document.body.style.overflow = 'hidden'
			},
			closePicker(){
				this.showPicker = false
				document.body.style.overflow = 'scroll'
			},
		},
		onLoad(options) {
			if(options!=null){
				if(options.xcId!=null){
					this.xcId = options.xcId
				}
			}
			console.log(options)
         },
		components:{
			PaySuccess,
			TimePicker,
			uniIcon,
			yanyiPop
		}
	}
</script>

<style scoped>
	.orderbody{
		width: 100%;
		height: 100vh;
		overflow: scroll;
		position: relative;
	}
	.list-title{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		height: 58.4upx;
		margin-top:40upx;
		
		margin-bottom: 20upx;
	}
	.list-title text{
		font-size: 30upx;
		font-weight: bolder;
	}
	.know-item{
		margin-left: 100upx;
		height: 80upx;
	}
	.know-dot{
		width: 6upx;
		height: 6upx;
		border-radius: 50%;
		background: #000000;
		float: left;
		margin-top: 37upx;
	}
	.know-item text{
		float: left;
		margin-left: 30upx;
		line-height: 80upx;
		font-size: 26upx;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.order-body{
		position: absolute;
		width: 100%;
		height: 100vh;
		top:0
		
	}
	.mask{
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0.3);
		position: fixed;
		z-index: 25;
	}
	.must-read{
		width: 100%;
		height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.read{
		font-size: 26upx;
		color: rgba(85,149,255,1.00);
		line-height: 80upx;
	}
	.order-head{
		width: 750upx;
		height: 320upx;
		/* position: absolute; */
		margin-top:150upx;
		/* background: #007AFF; */
		
	}
	.order-hotel-name{
		margin-left: 65upx;
		color: #FFFFFF;
		font-size: 38upx;
		font-weight: Regular;
		font-family: Microsoft YaHei Regular;
	}
	.time-jiantou{
		width: 15upx;
		height: 20upx;
		margin-top: 12upx;
		min-width: 10px;
		float: right;
		transform: rotate(90deg);
		min-height: 14px;
	}
	.people{
		width:150upx;
		height:68upx;
		border-radius:10upx;
		text-align: center;
		margin-right: 18upx;
		margin-top: 20upx;
		line-height: 68upx;
		color: #FFFFFF;
		font-size: 28upx;
		background: rgba(96,151,254,1.00);
	}
	.people-xz{
		width:158upx;
		margin-top: 20upx;
		height:66upx;
		border-radius:10upx;
		text-align: center;
		line-height: 68upx;
		font-size: 28upx;
		color: rgba(96,151,254,1.00);
		background: #FFFFFF;
		border: rgba(1,132,246,1.00) solid 1upx;
	}
	.renyuan-list{
		width: 360upx;
		margin-right: 42upx;
		float: left;
	}
	.renyuan-item{
		width: 400upx;
		font-size: 28upx;
		/* line-height: 100upx; */
		position: relative;
		padding-left: 43upx;
		padding-top: 20upx;
		margin-left: 50upx;
		border-bottom: rgba(246,246,246,1.00) solid 1upx;
		color: rgba(175,175,175,1.00);
		height: 200upx;
	}
	.renyuan-item image{
		width: 20upx;
		height: 23upx;
		margin-top: 88upx !important;	
		top: 0;
		right: 0;
		font-size: 21upx;
		position: absolute;
		color: #666666;
	}
	.renyuan-item:last-child{
		border-bottom: none;
	}
	.renyuan-name{
		width: 340upx;
		display: block;
		font-size: 30upx;
		line-height: 60upx;
		height: 60upx;
		color: rgba(51,51,51,1.00);
	}
	.renyuan-info{
		width: 340upx;
		display: block;
		font-size: 26upx;
		line-height: 60upx;
		height: 60upx;
		color: rgba(102,102,102,1.00);
	}
	.renyuan-tip{
		width: 340upx;
		display: block;
		font-size: 30upx;
		line-height: 120upx;
		height: 120upx;
		color: rgba(89,168,255,1.00);
	}

	.food-info{
		width: 677upx;
		height: 248upx;
		border-radius: 20upx;
		margin-left: auto;
		margin-right: auto;
		background: #FFFFFF;
		margin-top: 20upx;
		box-shadow: 0px 0px 6px 0px #c5c5c5;
	}
	.order-time{
		height: 110upx;
		width: 400upx;
		/* float: right; */
		font-size: 28upx;
		line-height: 50upx;
		text-align: right;
		/* padding-right: 20upx; */
	}
	.order-time text{
		line-height: 110upx;
		margin-right: 20upx;
	}
	.food-img{
		width: 247upx;
		height: 193upx;
		margin-left: 25upx;
		margin-top: 28upx;
		float: left;
		border-radius: 10upx;
	}
	
	.order-right{
		width: 340upx;
		height: 182upx;
		float: right;
		margin-right: 30upx;
		margin-top: 28upx;
	}
	.item-title{
		width: 100%;
		margin-top: 5upx;
		height: auto;
		display: table;
	}
	.title-text{
		font-size: 28upx;
		line-height: 40upx;
		float: left;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.title-price{
		font-size: 30upx;
		float: right;
		line-height: 40upx;
	}
	.order-right image{
		width: 20upx;
		height: 23upx;
		float: right;
		margin-top: 12upx;
		font-size: 21upx;
		color: #666666;
	}
	
	.tip{
		width: 100%;
		display: block;
		margin-top: 15upx;
		font-size: 26upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		color: rgba(0,0,0,1.00);
	}

	.hd-list{
		width: 100%;
		height: 40upx;
		display: flex;
		margin-top: 30upx;
		flex-direction: row;
	}
	.hd-item{
		width: 120upx;
		height: 40upx;
		margin-left: 20upx;
	}
	.item-img{
		width: 24px;
		height: 24px;
		margin-top: 8upx;
		margin-right: 20upx;
		float: left !important;
	}
	.item-text{
		float: left;
		font-size: 24upx;
		color: #55A0FF;
		line-height: 40upx;
	}
	.order-info{
		width: 677upx;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		display: table;
		background: #FFFFFF;
		border-radius: 20upx;
		margin-top: 28upx;
		box-shadow: 0px 0px 6px 0px #c5c5c5;
	}
	.order-item{
		width: 610upx;
		margin-left: auto;
		margin-right: auto;
		border-bottom: #E7E7E7 solid 1upx;
		height: 110upx;
	}
	.order-label{
		font-size: 30upx;
		line-height: 110upx;
		margin-left: 28upx;
		float: left;
	}
	.order-text{
		font-size: 28upx;
		line-height: 110upx;
		margin-left: 28upx;
		float: left;
	}
	.man-num{
		font-size: 28upx;
		line-height: 110upx;
		float: left;
		color: rgba(254,146,11,1.00);
	}
	.order-item image{
		width: 30upx;
		height: 30upx;
		float: right;
		margin-top: 40upx;
		margin-right: 20upx;
	}
	.order-num{
		font-size: 28upx;
		line-height: 110upx;
		float: right;
		margin-right: 20upx;
	}
	.order-price{
		font-size: 28upx;
		line-height: 110upx;
		color: #5776FE;
		float: right;
		margin-right: 28upx;
	}
	.phone{
		font-size: 28upx;
		line-height: 110upx;
		margin-left: 62upx;
		float: left;
		color: rgba(187,187,187,1.00);
		margin-right: 28upx;
	}
	.txl{
		width: 28upx;
		height: 30upx;
		margin-top: 12upx;
		min-width: 10px;
		min-height: 14px;
	}
	
	
	
	

	.order-bottom{
		width: 750upx;
		height: 98upx;
		border-top: rgba(0,0,0,0.1) solid 1upx;
		position: fixed;
		z-index: 23;
		bottom: 0;
		background: #FFFFFF;
	}
	.order-bottom .btn{
		float: right;
		width: 200upx;
		height: 98upx;
		border: none;
		text-align: center;
		line-height: 98upx;
		color: #FFFFFF;
		font-size: 30upx;
		background: -webkit-linear-gradient(left, #54B0FF,#577AFF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#577AFF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#577AFF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#577AFF);
		/* 标准的语法 */
	}
	.order-bottom .btn2{
		float: right;
		width: 200upx;
		height: 82upx;
		border: none;
		vertical-align: middle;
		text-align: center;
		padding-top: 16upx;
		line-height: 34upx;
		color: #FFFFFF;
		font-size: 30upx;
		background: -webkit-linear-gradient(left, #a0d3ff,#b1c1ff);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #a0d3ff,#b1c1ff);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #a0d3ff,#b1c1ff);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #a0d3ff,#b1c1ff);
		/* 标准的语法 */
	}
	.sum{
		float: right;
		color: #E25115;
		font-size: 30upx;
		line-height: 49upx;
		height: 40upx;
	}
	.price{
		float: right;
		color: #E25115;
		font-size: 36upx;
		line-height: 49upx;
		height: 40upx;
		margin-right: 23upx;
	}
	.yh{
		width: 100%;
		text-align: right;
	}
	.yh text{
		padding-left: 20upx;
		height: 35upx;
		font-size: 24upx;
		line-height: 35upx;
		padding-right: 20upx;
		border-radius: 20upx;
		margin-right: 23upx;
		color: #FFFFFF;
		background: -webkit-linear-gradient(left, #FE970A,#FF4E00);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #FE970A,#FF4E00);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #FE970A,#FF4E00);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #FE970A,#FF4E00);
		/* 标准的语法 */
	}
	
	.if-add-xc{
		width: 514upx;
		height: 246upx;
		border-radius: 20upx;
		background: #FFFFFF;
		position: fixed;
		top: 500upx;
		left: 118upx;
		text-align: center;
		z-index: 30;
	}
	.if-add-xc text{
		width: 100%;
		display: block;
		height: 40upx;
		margin-top: 73upx;
		font-size: 28upx;
	}
	.add-xc-bottom{
		width: 100%;
		height: 94upx;
		border-top: #E6E6E6 solid 1upx;
		position: absolute;
		bottom: 0;
	}
	.add-quxiao{
		width:257upx;
		height: 94upx;
		text-align: center;
		line-height: 94upx;
		color: #CCCCCC;
		float: left;
		font-size: 28upx;
	}
	.add-add{
		width:255upx;
		height: 94upx;
		text-align: center;
		line-height: 94upx;
		color: #55A0FF;
		float: right;
		font-size: 28upx;
		border-left: #E6E6E6 solid 1upx;
	}
</style>
